<template>
  <view style="width: 750rpx;">
    <movable-area style="width:100%;height:300px">
        <movable-view
            style="width: 750rpx"
            v-for="(item, index) in list"
            direction="all"
            :key="item.key"
            :x="0"
            :y="item.y"
            @touchstart="handleDragStart(index)"
            @change="handleMoving"
            @touchend="handleDragEnd"
    >
            {{item.name}}
        </movable-view>
    </movable-area>
  </view>
</template>

<script>
  export default {
    data(){
       return {
         activeIndex:-1,
         moveToIndex:-1,
         list:[
         {name:'人生若只如初见，何事秋风悲画扇。', id:1},
  {name:'最是人间留不住，朱颜辞镜花辞树', id:2},
  {name:'等闲变却故人心，却道故人心易变。骊山语罢清宵半，泪雨霖铃终不怨。何如薄幸锦衣郎，比翼连枝当日愿。' , id:3},
          ],
         oldIndex:-1,
         cloneList:[],
         itemHeight:50
       }
    },
    onLoad(options) {
      this.initList(this.list)
    },
    methods:{
      initList(list){
        // const newList = this.deepCopy(list);
        // this.list = newList.map((item, index) => {
        //     return {
        //         ...item,
        //         y:index*this.itemHeight,
        //         key: Math.random() + index
        //     };
        // });
        // console.log(newList)
        //拷贝一份初始list值
        // this.cloneList = this.deepCopy(this.list);
      },

        //拖拽开始
        handleDragStart(index) {
            this.activeIndex = index;
            this.oldIndex = index;
        },

        //拖拽中
        handleMoving(e) {},

        //拖拽结束
        handleDragEnd(e) {},

      //简单实现深拷贝。
      deepCopy(val){
        return JSON.parse(JSON.stringify(val));
      },
      handleMoving(e){
        if (e.detail.source !== 'touch') return;
        const { x, y } = e.detail;
        const currentY = Math.floor((y + this.itemHeight / 2) / this.itemHeight);

        this.moveToIndex = Math.min(currentY, this.list.length - 1);

        //更新移动后的位置
        if (this.oldIndex !== this.moveToIndex && this.oldIndex !== -1 && this.moveToIndex !== -1) {
          const newList = this.deepCopy(this.cloneList);
          //交换位置
          newList.splice(this.moveToIndex, 0, ...newList.splice(this.activeIndex, 1));

          this.list.forEach((item, index) => {
            if (index !== this.activeIndex) {
              const itemIndex = newList.findIndex(val => val[this.itemKey] === item[this.itemKey]);
              item.y=itemIndex*this.itemHeight
            }
          });
          this.oldIndex = this.moveToIndex;
        }
      },
      handleDragEnd(e) {

        if (this.moveToIndex !== -1 && this.activeIndex !== -1 && this.moveToIndex !== this.activeIndex) {
              this.cloneList.splice(this.moveToIndex, 0, ...this.cloneList.splice(this.activeIndex, 1));
        }

        //重新排序下更新后的位置。
        this.initList(this.cloneList);
        // const endList = this.list.map(item => this.omit(item, ['y', 'key']));
        const endList = this.list.map(item => item, ['y', 'key'])
        this.$emit('input', endList);
        this.$emit('end', endList);

        this.activeIndex = -1;
        this.oldIndex = -1;
        this.moveToIndex = -1;
        },

    },
    watch: {
        value: {
            handler() {
                    this.initList(this.value);
            },
            immediate: true,
            deep: true
        }
    }
  }
</script>

<style scoped lang="scss">
  .test-list {
      position: relative;
      height: 100vh;
  }
  .test-item {
      position: absolute;
      background-color: orange;
  }
  .test-item-base {
      transition: all .5s;
  }
</style>
